<template>
  <div class="event-create-container">
    <h2>创建活动</h2>
    <form class="event-form">
      <div class="form-group">
        <label for="eventName">活动名称</label>
        <input type="text" id="eventName" placeholder="请输入活动名称" required>
      </div>
      
      <div class="form-group">
        <label for="eventDescription">活动描述</label>
        <textarea id="eventDescription" rows="4" placeholder="请输入活动描述" required></textarea>
      </div>
      
      <div class="form-row">
        <div class="form-group">
          <label for="startTime">开始时间</label>
          <input type="datetime-local" id="startTime" required>
        </div>
        
        <div class="form-group">
          <label for="endTime">结束时间</label>
          <input type="datetime-local" id="endTime" required>
        </div>
      </div>
      
      <div class="form-group">
        <label for="category">活动分类</label>
        <select id="category" required>
          <option value="">请选择分类</option>
          <option value="technology">技术</option>
          <option value="marketing">营销</option>
          <option value="social">社交</option>
          <option value="education">教育</option>
        </select>
      </div>
      
      <div class="form-group">
        <label for="location">活动地点</label>
        <input type="text" id="location" placeholder="请输入活动地点" required>
      </div>
      
      <div class="form-group">
        <label for="maxParticipants">最大参与人数</label>
        <input type="number" id="maxParticipants" min="1" placeholder="请输入最大参与人数" required>
      </div>
      
      <div class="form-group">
        <label for="ticketPrice">票价</label>
        <input type="number" id="ticketPrice" min="0" step="0.01" placeholder="请输入票价" required>
      </div>
      
      <div class="form-group">
        <label>活动图片</label>
        <div class="file-upload">
          <input type="file" id="eventImage" accept="image/*">
          <label for="eventImage">选择图片</label>
        </div>
      </div>
      
      <div class="form-actions">
        <button type="button" class="cancel-btn">取消</button>
        <button type="submit" class="submit-btn">创建活动</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: 'EventCreate',
  setup() {
    return {}
  }
}
</script>

<style scoped>
.event-create-container {
  padding: 20px;
}

h2 {
  margin-bottom: 24px;
  color: #333;
}

.event-form {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-weight: 500;
  font-size: 14px;
}

input[type="text"],
input[type="number"],
input[type="datetime-local"],
select,
textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="datetime-local"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.file-upload {
  position: relative;
  display: inline-block;
}

.file-upload input[type="file"] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.file-upload label {
  display: inline-block;
  padding: 8px 16px;
  background-color: #f5f5f5;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  margin: 0;
  transition: all 0.3s;
}

.file-upload label:hover {
  border-color: #1890ff;
  color: #1890ff;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 32px;
}

.cancel-btn,
.submit-btn {
  padding: 10px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #333;
}

.cancel-btn:hover {
  background-color: #e8e8e8;
}

.submit-btn {
  background-color: #1890ff;
  color: white;
}

.submit-btn:hover {
  background-color: #40a9ff;
}
</style>